﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Column Templates</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
				$scope.gridName = "gridSample";

				$scope.columns = [
					{ 
						editorType: 'checkbox', 
						headerAlignment: 'center', 
						contentAlignment: 'center', 
						width: 30, 
						fixedWidth: true, 
						headerTemplate: "'column-check.html'", 
						onColumnCheck: function(e){
							var list = $gridService.getFlatList($scope.gridName, true);
							for (var i = 0; i < list.length; i++)
								list[i].cells[0].value = e.checked;
						}
					},
					{ 
						headerTemplate: "'column-two-lines.html'", 
						headerAlignment: 'center', width: 350,
						footerTemplate: "'footer-count.html'",
						counter: {
							checkCount: 0,
							totalCount: 0
						},
						onCount: function(){
							var list = $gridService.getFlatList($scope.gridName, true);
							
							$scope.columns[1].counter.totalCount = list.length;
							$scope.columns[1].counter.checkCount = 0;

							for (var i = 0; i < list.length; i++){
								if (list[i].cells[0].value)
									$scope.columns[1].counter.checkCount++;
							}
						}
					},
					{ headerTemplate: "'column-icon.html'", headerAlignment: 'center', width: 270 },
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Item1",
						cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],
						rows: [
							{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },
							{ 
								id: 12,
								pid: 1,
								text: "Item12",
								cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],
								rows: [
									{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },
									{ 
										id: 122,
										pid: 12,
										text: "Item122", 
										cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],
										expanded: false,
										rows: [
											{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },
											{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }
										]
									},
									{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }
								]
							},
							{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },
							{
								id: 14,
								pid: 1,
								text: "Item14",
								cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],
								expanded: false,
								rows: [
									{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },
									{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }
								]
							}
						]
					},
					{
						id: 2,
						text: "Item2",
						cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],
						rows: [
							{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },
							{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },
							{
								id: 23,
								pid: 2,
								text: "Item23", 
								cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],
								expanded: false,
								rows: [
									{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },
									{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }
								]
							}
						]
					},
					{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }
				];

				// Update data in the footer
				var initTimer = $timeout(function(){
					$scope.columns[1].onCount();
					$timeout.cancel(initTimer);
				}, 100);
			}]);
    </script>
    <style type="text/css">
		.control-panel
		{
			margin-left: 35px;
			width: 250px;
		}
		.feature-content
		{
			width: 700px;
		}
        .directive
        {
        	border: thin solid #dadada;
        	width: 700px;
        	height: 350px;
        }
        .column-header
        {
        	margin: 0;
        	padding: 0;
        }
        .column-header p
        {
        	margin: 0;
        	padding: 0;
        }
        .column-header p:hover
        {
        	color: white !important;
        }
        .column-header p:first-child
        {
        	font-weight: bold;
        }
        .column-header p:last-child
        {
        	color: #008000;
        }
        .check-content
        {
        	font-style: italic;
        	font-weight: normal !important;
        	color: #800000 !important;
        }
	    .more-info
	    {
	        background-position: -16px -80px;
	    }
	    .more-info:hover
	    {
	        background-position: 0 -80px;
	    }
        .column-footer
        {
        	margin: 0;
        	padding: 0;
        	white-space: nowrap;
        }
        .column-footer p
        {
        	display: inline-block;
        	margin: 0;
        	padding: 0;
        }
	    .inline-button
	    {
	    	background: #2455b0;
	    	border: thin solid black;
	    	color: white;
        	display: inline-block;
        	margin: 0 25px 0 3px;
        	width: 60px;
	    }
	    .inline-button:hover
	    {
			background-color: #153268;
	    }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
			<script type="text/ng-template" id="column-check.html">
                <iui-checkbox name="{{checkName}}" checked-changed="columns[0].onColumnCheck(e)"></iui-checkbox>
			</script>
			<script type="text/ng-template" id="column-two-lines.html">
				<div class="column-header">
					<p>This is a column with longer text</p>
					<p>Second line</p>
				</div>
			</script>
			<script type="text/ng-template" id="column-icon.html">
				<div class="column-header">
                    <p class="check-content">In convallis tellus a mauris <span class="icons more-info"></span></p>
				</div>
			</script>
			<script type="text/ng-template" id="footer-count.html">
				<div class="column-footer">
					<button class="inline-button" ng-click="columns[1].onCount()">Count</button>
                    <p>Checked Rows: {{columns[1].counter.checkCount}} / {{columns[1].counter.totalCount}}</p>
				</div>
			</script>
	        <h2 class="feature-title">Grids / Column Templates</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" expanding-column-index="1" allow-focus="false"></iui-treegrid>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p>In this sample each column header is built using a custom template. Second column footer also uses a custom template. The following examples are presented: 
	                    <ul class="feature-points">
	                        <li>column header with check box - a template showing a check box. We are using the <a href="../checkbox/overview.html">IntegralUI CheckBox directive</a> in this case, but any other HTML element is acceptable, like input element</li>
	                        <li>column header with text in two lines - a template with two text paragraphs</li>
	                        <li>column header  with text and an icon - a template with a paragraph containing text and image</li>
	                        <li>column footer with button and text - a template with a paragraph containing button and text</li>
	                    </ul>
	                </p>
                    <p>Whenever teh button in column footer is clicked, the text is updated showing how many rows are checked.</p>
                    <p>The template is created in code, using custom CSS styles and HTML elements, and then applied to the column by using the following field:
                        <ul class="feature-points">
                            <li><span style="color:#c60d0d">headerTemplate</span> - holds a reference to a custom template used to replace the header text with custom HTML elements</li>
                            <li><span style="color:#c60d0d">footerTemplate</span> - holds a reference to a custom template used to replace the footer text with custom HTML elements</li>
                        </ul>
                    </p>
                     <p>There is no limit on what kind of template that you can create. Any combination of HTML elements is acceptable, along with custom events.</p>
                    <p style="margin:10px 0 30px 0;color:#c60d0d;font-weight:bold">This offline sample may not work using <u>Chrome browser</u>. You can try using any other browser: FireFox, IE, Opera, Safari. This happens due to restrictions of Chrome when loading templates locally. The <a href="http://www.lidorsystems.com/products/web/studio/samples/treegrid/column-templates.aspx">online version of this sample</a> works without problems.</p>
               </div>
            </div>
        </div>
    </div>
</body>
</html>
